<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            margin-left: 60px;
            margin-top: 100px;
            position: relative;

        }

        #small {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #small img {
            position: absolute;
            width: 400px;
            height: 400px;
        }

        #mask {
            width: 140px;
            height: 140px;
            position: absolute;
            background: rgba(230, 230, 45, 0.58);
            display: none;
        }

        #big {
            position: absolute;
            left: 410px;
            top: 0px;
            width: 400px;
            height: 400px;
            display: none;
            overflow: hidden;
        }

        #big img {
            width: 800px;
            height: 800px;
            display: block;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id='box'>
        <div id='small'>
            <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg">
            <div id='mask'></div>
        </div>
        <div id='big'>
            <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_800x800.jpg" id='pic'>
        </div>
    </div>

    <script>
        var box = document.getElementById('box');
        var mask = document.getElementById('mask');
        var big = document.getElementById('big');
        var pic = document.getElementById('pic');
        box.onmouseover = function () {
            mask.style.display = 'block';
            big.style.display = 'block'
        }
        box.onmousemove = function (e) {
            var maskX = e.pageX - box.offsetLeft - 70;
            var maskY = e.pageY - box.offsetTop - 70;
            maskX = (maskX < 0) ? 0 : maskX;
            maskX = (maskX > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskX;
            maskY = (maskY < 0) ? 0 : maskY;
            maskY = (maskY > box.offsetWidth - mask.offsetWidth) ? (box.offsetWidth - mask.offsetWidth) : maskY;
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
            console.log(box.offsetWidth,mask.offsetWidth,pic.offsetWidth);

            var maxMask = box.offsetWidth - mask.offsetWidth;
            var maxBig = pic.offsetWidth - box.offsetWidth;
            var x = maskX / maxMask * maxBig;
            var y = maskY / maxMask * maxBig;
            pic.style.left = -x + 'px';
            pic.style.top = -y + 'px';


        }
        box.onmouseout = function () {
            mask.style.display = 'none';
            big.style.display = 'none'
        }
    </script>
</body>

</html>